<template>
	<view class="content">

		<view class="detail flex flex-col justify-center items-center w100">
			<view class="award_info flex  flex-col w100 justify-center items-center">
				<view class="f_36 c_0">{{name}}</view>
				<view class="f_28 red mt_20">领奖截止时间：{{myluck.receiveEndTime}}</view>
			</view>
			<!-- 物流 -->
			<template v-if="myluck.receiveType==1">
				<template v-if="myluck.status==0">
					<view class="myaddinfo w100 mt_40">
						<view class="title flex flex-row justify-center items-center">

							<text>收货信息</text>

						</view>
						<!-- 待兑奖 -->
						<view class="list flex flex-col w100">
							<template v-if="addressInfo.realName">
								<view class="item flex flex-row justify-between items-center" @tap='onAddress'>
									<text class="f_28 c_3">收货地址：</text>
									<view class="flex flex-row justify-end items-center" style="width: 450rpx;line-height: 1.3;text-align: right;">

										
										<!-- <text class="f_28 c_6">{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.district}}{{addressInfo.detail}}</text>
										 -->
										<text class="f_28 c_6"><text class='f_28 c_3' v-if="addressInfo.isDefault">[默认]</text>{{addressInfo.detail}}</text>

										<img src="/static/arrow_right.png" class="arrow-right" alt="" />
									</view>

								</view>
								<view class="item flex flex-row justify-between items-center">
									<text class="f_28 c_3">联系人姓名：</text>
									<text class="f_28 c_6">{{addressInfo.realName}}</text>

								</view>
								<view class="item flex flex-row justify-between items-center">
									<text class="f_28 c_3">联系人电话：</text>
									<text class="f_28 c_6">{{addressInfo.phone}}</text>

								</view>

							</template>
							<template v-else>
								<view class="item flex flex-row justify-between items-center" @tap='onAddress'>
									<text class="f_28 c_3">收货地址：</text>
									<view class="">

										<text class="f_28 c_6">设置收货地址</text>

										<img src="/static/arrow_right.png" class="arrow-right" alt="" />
									</view>

								</view>
							</template>



							<view class="item flex flex-row justify-between items-center">
								<text class="f_28 c_3">兑奖备注：</text>
								<input type="text" value="" placeholder="请输入备注" v-model="myluck.remark"
									class="input_new" />

							</view>
						</view>



					</view>

					<view class="myaddinfo w100 mt_40">
						<view class="title flex flex-row justify-center items-center">

							<text>兑奖信息</text>

						</view>
						<view class="list flex flex-col w100">

							<view class="item flex flex-row justify-between items-center">
								<text class="f_28 c_3">兑奖状态：</text>
								<text
									class="f_28 c_6">{{myluck.status==0?'待兑奖':myluck.status==1?'待核销':myluck.status==2?'出奖中':myluck.status==3?'已完成':myluck.status==4?'已取消':myluck.status==5?'已过期':''}}</text>

							</view>



						</view>
					</view>
					<view class="btn_new" v-if='myluck.status==0' @click="duijiang">
						申请兑奖
					</view>
				</template>
				<template v-else>
					<view class="myaddinfo w100 mt_40">
						<view class="title flex flex-row justify-center items-center">

							<text>兑奖信息</text>

						</view>
						<view class="list flex flex-col w100">

							<view class="item flex flex-row justify-between items-center">
								<text class="f_28 c_3">兑奖状态：</text>
								<text
									class="f_28 c_6">{{myluck.status==0?'待兑奖':myluck.status==1?'待核销':myluck.status==2?'出奖中':myluck.status==3?'已完成':myluck.status==4?'已取消':myluck.status==5?'已过期':''}}</text>

							</view>



						</view>
						<view class="list flex flex-col w100">


							
							<view class="item flex flex-row justify-between items-center">
								<text class="f_28 c_3">兑奖备注：</text>
								<input disabled="true" type="text" value="" placeholder="暂无备注" v-model="myluck.remark"
									class="input_new" />

							</view>
							<view class="item flex flex-row justify-between items-center" v-if="myluck.expressImage">
								<text class="f_28 c_3">出奖图片：</text>
								<image :src="myluck.expressImage" mode="" class="img_new"></image>
							</view>
							<view class="item flex flex-row justify-between items-center">
								<text class="f_28 c_3">商品物流：</text>
								<view class="flex flex-row justify-center items-center" v-if="myluck.expressCode">
									<text class="f_28 c_3">{{myluck.expressCompany}}{{myluck.expressCode}}</text>
									<text @click="lookexpress(myluck.expressCode)" class="k_btn">查询物流</text>
								</view>
								<view v-else class="flex flex-row justify-center items-center">
									<text class="f_28 c_3">商家未发货</text>
								</view>
							</view>
						</view>


						<!-- <view class="btn_new" v-if="myluck.status==2">
							确认收货
						</view> -->
					</view>

				</template>

			</template>
			<!-- 	自提 -->
			<template v-else>
				<template>
					<view class="myaddinfo w100 mt_40">
						<view class="title flex flex-row justify-center items-center">

							<text>商家信息</text>

						</view>
						<view class="list flex flex-col w100">
							<view class="item flex flex-row justify-between items-center">
								<text class="f_28 c_3">商家电话：</text>
								<view class="">
									<text class="f_28 c_6">
										{{detail.merchant.phone}}
									</text>
									<text @click="callphone(detail.merchant.phone)" class="k_btn">拨打</text>
								</view>


							</view>

							<view class="item flex flex-row justify-between items-center">
								<text class="f_28 c_3" style="width: 300rpx">商家地址：</text>
								<view class="">
									<text class="f_28 c_6">
										{{detail.merchant.area}}
									</text>

								</view>


							</view>
							<view class="item flex flex-row justify-between items-center">
								<text class="f_28 c_3">兑奖状态：</text>
								<text
									class="f_28 c_6">{{myluck.status==0?'待兑奖':myluck.status==1?'待核销':myluck.status==2?'出奖中':myluck.status==3?'已完成':myluck.status==4?'已取消':myluck.status==5?'已过期':''}}</text>

							</view>



						</view>

						<view class="title flex flex-row justify-center items-center">

							<text>兑奖信息</text>

						</view>
						<view class="list flex flex-col w100">
							<view class="item flex flex-row justify-between items-center">
								<text class="f_28 c_3">兑奖状态：</text>
								<text
									class="f_28 c_6">{{myluck.status==0?'待兑奖':myluck.status==1?'待核销':myluck.status==2?'出奖中':myluck.status==3?'已完成':myluck.status==4?'已取消':myluck.status==5?'已过期':''}}</text>

							</view>



						</view>
						<view class="flex flex-row justifity-between items-center" v-if="myluck.status==0||myluck.status==1">
							<view class="w50" >
								<view class="btn_new k_new btnBg"@click="chushi">
									出示二维码
								</view>
							</view>
						</view>
						
						<!-- 二维码展示 -->
						<uni-popup ref="buypopup">
							<view class="buylist">
								<view class="buy-title flex flex-row justify-end items-center">
									
									<image class="close_icon" src="@/static/mine/close.svg" mode="widthFix" @click="close"></image>
						
								</view>
								<view class="flex flex-row justify-between items-center " style="flex-direction: column">
											<canvas id="qrcode" canvas-id="qrcode" style="width: 300px;height: 300px;"></canvas>
											
										<view class="flex justify-center items-center mt_20 f_28 c_9">
											让商家扫一扫领取奖品
										</view>
								</view>
								<view class="fixedbtn1 flex flex-row justify-between  mt_20">
									<view class="btn background_red"   @click="saowan" >确定</view>
								</view>
							
								
							</view>
						</uni-popup>
								
						
					</view>
				</template>
			</template>


   
		<view class="" v-if="showexpress">
			<mwg-logistics :info="express"></mwg-logistics>
		</view>

		</view>

		<addressWindow ref="addressWindow" :address='address' :pagesUrl="pagesUrl" @OnDefaultAddress="OnDefaultAddress"
			@OnChangeAddress="OnChangeAddress" @changeClose="changeClose"></addressWindow>

	</view>

</template>

<script>
	import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
	import mwgLogistics from '@/components/mwg-logistics/mwg-logistics.vue'
	import addressWindow from '@/components/addressWindow';
	import {
		toLogin
	} from '@/libs/login.js';

	import {
		getAddressList,
		getAddressDetail,
		getAddressDefault
	} from '@/api/user.js';
	import {
		mapGetters
	} from "vuex";
	import {
		drawRcord,
		prizeApply,
		yhsaoprize,

		drawInfo,
	} from '@/api/activity.js';
	export default {
		components: {
			addressWindow,
			mwgLogistics
		},
		computed: mapGetters(['isLogin', 'chatUrl', 'userInfo', 'uid']),
		data() {
			return {
				name: '',
				textareaStatus: true,
				address: {
					address: false,
					addressId: 0
				}, //地址组件

				pagesUrl: "",
				addressInfo: {}, //地址信息
				addressId: 0, //地址id
				show: true,
				count: 5,
				value: 0,
				fileList1: [],
				id: '',
				myluck: {},
				detail: {},
				express:{},
				showexpress:false
			}
		},
		onLoad(data) {
			this.id = data.id
			this.addressId = data.addressId || 0;
			this.getmyluck()
			this.getaddressInfo()
		},
		onReady() {
			//this.$refs.buypopup.open('center')
		},
		methods: {
			lookexpress(num){
				uni.request({
				  url: 'https://www.kuaidi100.com/autonumber/autoComNum?text='+num, //你的接口地址
				  method: 'POST',
				 
				  success:res=> {
				    console.log(res)
					this.express_one(res.data.auto[0].comCode,num)
					
				  },
				  fail: function (res) {
				    //请求失败的处理
				  }
				});
			},
			express_one(name,num){
				uni.request({
				  url: 'https://www.kuaidi100.com/query?type='+name+'&postid='+num, //你的接口地址
				  method: 'GET',
				 
				  success: res=> {
				   
					this.express = res.data
					this.showexpress = true
					
				  },
				  fail: function (res) {
				    //请求失败的处理
				  }
				});
			},
			
			// 打电话
			callphone(e){
				 uni.makePhoneCall({
				    phoneNumber: e
				  })
			},
			chushi(){
				this.$refs.buypopup.open('center')
			},
			close(){
				this.getmyluck()
				this.$refs.buypopup.close('center')
			},
			saowan(){
				this.getmyluck()
				this.$refs.buypopup.close('center')
			},
			saoma() {
				uni.scanCode({
					success: res => {
						let codeArray = res.result
						if (res.scanType == 'QR_CODE') {

								yhsaoprize(Number(codeArray)).then(e=>{
									uni.showToast({
										title: '兑换成功',
										duration: 2000,
										icon: 'none'
									})
									this.getmyluck()
								}).catch(M=>{
									uni.showToast({
										title: M.message,
										duration: 2000,
										icon: 'none'
									})
								})


							console.log(res)
							console.log('条码类型：' + res.scanType);
							console.log('条码内容：' + codeArray);
						}
					}
				})
			},
			getma() {

				// 获取uQRCode实例
				var qr = new UQRCode();
				// 设置二维码内容
				qr.data = this.myluck.id;
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = 300;
				// 调用制作二维码方法
				qr.make();
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();	
			},
			duijiang() {
				if (!this.addressInfo.realName) {
					uni.showToast({
						title: '请先选择地址',
						icon: 'none'
					})
				}
				let data = {
					"city": this.addressInfo.city,
					"detail": this.addressInfo.detail,
					"district": this.addressInfo.district,
					"phone": this.addressInfo.phone,
					"province": this.addressInfo.province,
					"realName": this.addressInfo.realName,
					"recordId": this.myluck.id,
					"remark": this.myluck.remark,
					"uid": this.uid
				}
				prizeApply(data).then(res => {
					uni.showToast({
						title: '申请成功'
					})
					this.getmyluck()
				})

			},
			onAddress: function() {
				console.log(111)
				let that = this;
				that.address.address = true;
				that.pagesUrl = '/subpageC/address_list/address_list?userhxid=' + this.id;
			},
			/**
			 * 首次进页面展示默认地址
			 */
			OnDefaultAddress: function(e) {
				this.addressInfo = e;
				console.log(this.addressInfo)
				this.address.addressId = e.id;
			},
			/**
			 * 选择地址后改变事件
			 * @param object e
			 */
			OnChangeAddress: function(e) {
				this.addressInfo = e;
				this.address.addressId = e.id;
				//this.orderInfoVo.addressId = e;
				this.address.address = false;
				//this.getaddressInfo();
			},

			/*
			 * 获取默认收货地址或者获取某条地址信息
			 */
			getaddressInfo: function() {
				let that = this;
				if (that.addressId) {
					getAddressDetail(that.addressId).then(res => {
						if (res.data) {
							res.data.isDefault = parseInt(res.data.isDefault);
							that.addressInfo = res.data || {};
							that.addressId = res.data.id || 0;
							that.address.addressId = res.data.id || 0;
						}
					})
				} else {
					getAddressDefault().then(res => {
						if (res.data) {
							res.data.isDefault = parseInt(res.data.isDefault);
							that.addressInfo = res.data || {};
							that.addressId = res.data.id || 0;
							that.address.addressId = res.data.id || 0;
						}
					})
				}
			},
			// 关闭地址弹窗；
			changeClose: function() {
				this.$set(this.address, 'address', false);
			},
			getmyluck() {
				let data = {
					limit: 100,
					page: 1,
					activityId: this.id,
					isMatch: 1,
					uid: this.uid

				}
				drawRcord(data).then(res => {
					this.myluck = res.data.list[0]
					this.getdetail()
					this.address.addressId = this.addressId;
					//调用子页面方法授权后执行获取地址列表
					this.$nextTick(function() {
						this.$refs.addressWindow.getAddressList();
					})
				this.getma()
					if (this.myluck.receiveType == 2) {
						this.getma()
					}

				})
			},

			//获取详情
			getdetail() {
				drawInfo(this.myluck.activityId).then(res => {
					let name = ''
					let index = res.data.prizes.findIndex(item => item.id === this.myluck.prizeId);
					console.log(index)
					this.name = res.data.prizes[index].title
					this.detail = res.data


				})

			},
		}
	}
</script>

<style lang="scss">
	.close_icon {
		width: 34rpx;
	}
	.buylist{
		background: #fff;
		padding: 30rpx ;
		padding-bottom: 0;
		border-radius: 20rpx;
		width: 710rpx;
		input{
			text-align: right;
		}
		.buy-title{
			padding: 20rpx 0;
		}
		.buyactive {
			border-color: #DF4B43!important;
		}
		.buyitem{
			width: 214rpx;
			margin: 20rpx 0;
			padding-top: 40rpx;
			height: 280rpx;
			border:2rpx solid #e8e8e8;
			border-radius:24rpx;
			position: relative;
			.tag{
				margin-top:10rpx;
				background-color: #FFEDC2;
				width: 85%;
				height: 50rpx;
				border-radius: 100rpx;
				font-size: 18rpx;
			}
			.abtag{
				position: absolute;
				width: 134rpx;
				height: 46rpx;
				padding: 8rpx 18rpx;
				border-radius: 0px 10px;
				background: #F54C30;
				color: #fff;
				font-size: 22rpx;
				right: 0;
				top: 0;
			}
		}
	}
	.fixedbtn1 {
			width: 100%;
			
			background-color: #fff;
			z-index: 9;
			.btn {
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				width: 90%;
				margin-left: 5%;
				height: 90rpx;
				border-radius: 200px;
	
				text-align: center;
				display: flex;
	
				justify-content: center;
				align-items: center;
	
			}
		}
	
	.k_btn {
		border-radius: 6rpx;
		border: 1rpx solid #DF4B43;
		padding: 0 10rpx;
		line-height: 1.5;
		margin-left: 10rpx;
		color: #DF4B43;
		font-size: 26rpx;
	}

	.img_new {
		width: 180rpx;
		height: 180rpx;
		border-radius: 10rpx;
	}

	.arrow-right {
		width: 40rpx;
		height: 40rpx;
	}

	.input_new {
		width: 400rpx;
		text-align: right;
	}

	.btn_new {
		border-radius: 10rpx;
		background: #DF4B43;
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: center;
		height: 84rpx;
		color: #fff;
		margin: 40rpx 0;
		margin-bottom: 20rpx;
	}

	.w50 {
		flex: 1
	}

	.k_new {
		border-radius: 10rpx;
		background: #fff;
		border: 1rpx solid #DF4B43;
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: center;
		height: 84rpx;
		color: #DF4B43;
		margin: 40rpx 0;
		margin-bottom: 20rpx;
	}
.btnBg{
	background: #DF4B43;
	color: #fff;
}
	.title {
		position: relative;
		width: 100%;

		text {
			color: #6F6F6F;
		}
	}

	.title::before {
		width: 140rpx;
		content: "";
		height: 1rpx;
		border-bottom: 1rpx dashed #000;
		margin-right: 20rpx;
	}

	.title::after {
		width: 140rpx;
		content: "";
		height: 1rpx;
		border-bottom: 1rpx dashed #6F6F6F;

		margin-left: 20rpx;
	}

	input {
		width: 70%;
		text-align: right;
	}

	.textarea1 {
		width: 90%;

		textarea {
			width: 480rpx;
			padding: 20rpx;
			border-radius: 10rpx;
			background: #f6f6f6;
			height: 150rpx;
		}
	}

	page,
	body {
		background: #DF4B43 !important;
	}

	.content {
		width: 700rpx;
		margin: 0 auto;

		.myaddinfo {
			position: relative;
		}

		.myaddinfo::before {
			content: "";
			width: 30rpx;
			height: 30rpx;
			background: #DF4B43;
			border-radius: 100%;
			position: absolute;
			left: -60rpx;
			top: 20rpx;

		}

		.myaddinfo::after {
			content: "";
			width: 30rpx;
			height: 30rpx;
			background: #DF4B43;
			border-radius: 100%;
			position: absolute;
			right: -60rpx;
			top: 20rpx;

		}

		.detail {
			padding: 40rpx;
			margin: 60rpx auto;
			background-color: #fff;
			border-radius: 10rpx;
		}

		.list {
			.item {
				line-height: 100rpx;
				border-bottom: 1rpx solid #f6f6f6;
			}
		}
	}
</style>